<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<link href="${ctx}/static/fullcalendar/jquery-ui.css" rel="stylesheet" type="text/css" />
<div class="fancy">
	<h3>编辑日程</h3>
	<form id="add_form" action="${ctx}/basic/calendar/update" method="post">
		<input type="hidden" name="id" id="eventid" value="${calendar.id }"> <input type="hidden" name="calendarType" id="calendarTypeId"
			value="${calendar.calendarType==null?typeList[0].id:calendar.calendarType.id }">
		<p>
			日程类型： <select id="calendarTypeName" style="height: 20px; width: 320px;" onchange="fn_secChangeType()"
				value="${calendar.calendarType==null?typeList[0].typeName:calendar.calendarType.typeName }">
				<c:if test="${typeList!=null }">
					<c:forEach items="${typeList}" var="data">
						<option value="${data.typeName }" typeColor="${data.backgroundColor }" typeId="${data.id }"
							<c:if test="${data.typeName == calendar.calendarType.typeName}">selected</c:if>>${data.typeName }</option>
					</c:forEach>
				</c:if>
			</select>
		</p>
		<p>
			日程内容： <input type="text" class="input" name="title" id="title" value="${calendar.title==null?typeList[0].typeName: calendar.title}"
				style="width: 320px" placeholder="记录你将要做的一件事...">
		</p>
		<p>
			日程颜色： <input id="backgroundColor" name='backgroundColor' type="color" style="height: 28px; width: 320px"
				value="${calendar.backgroundColor==null?typeList[0].backgroundColor:calendar.backgroundColor}" disabled="disabled">
		</p>
		<p>
			开始时间： <input type="text" class="input" name="start" id="start"
				value='<fmt:formatDate value="${calendar.start }" pattern="yyyy-MM-dd HH:mm" />'
				onfocus="WdatePicker({isShowWeek:true,readonly:true,dateFmt:'yyyy-MM-dd HH:mm'})" style="width: 160px">
		</p>
		<p>
			结束时间： <input type="text" class="input" name="end" id="end" value='<fmt:formatDate value="${calendar.end}" pattern="yyyy-MM-dd HH:mm" />'
				onfocus="WdatePicker({isShowWeek:true,readonly:true,dateFmt:'yyyy-MM-dd HH:mm'})" style="width: 160px">
		</p>
		<p>
			<label><input type="radio" value="1" name="allDay" <c:if test="${calendar.allDay == 1}">checked</c:if>> 全天</label> <label><input
				type="radio" value="2" name="allDay" <c:if test="${calendar.allDay!=1}">checked</c:if>> 非全天</label>
		</p>
		<div class="sub_btn">
			<c:if test="${not empty calendar.id }">
				<span class="del"><input type="button" class="btn btn_del" id="del_event" value="删除"></span>
			</c:if>
			<input id="submit" type="submit" class="btn btn_ok" value="确定"> <input type="button" class="btn btn_cancel" value="取消"
				onClick="$.fancybox.close()">
		</div>
	</form>
</div>
<script src="${ctx}/jeasyui-extensions/plugins/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="${ctx}/static/fullcalendar/jquery.form.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		//提交表单
		$('#add_form').ajaxForm({
			beforeSubmit : showRequest, //表单验证
			success : showResponse,
			error : showResponse
		//成功返回
		});

		//删除事件
		$("#del_event").click(function() {
			var eventid = $("#eventid").val();
			$.post("${ctx}/basic/calendar/delete/" + eventid + "/", function(msg) {
				if (msg.success) {//删除成功
					$.fancybox.close();
					$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
				} else {
					alert(msg);
				}
			}, "json");
		});
	});

	function showRequest() {
		var events = $("#title").val();
		if (events == '') {
			alert("请输入日程内容！");
			$("#title").focus();
			return false;
		}
	}

	function showResponse(responseText, statusText, xhr, $form) {
		var data = eval("(" + responseText.responseText + ")");
		if (statusText == "parsererror") {
			if (data.success) {
				$.fancybox.close();
				$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据

			} else {
				alert(data.msg);
			}
		} else {
			alert(statusText);
		}
	}
	function fn_secChangeType() {
		$("#calendarTypeId").val($("#calendarTypeName").find('option:selected').attr("typeId"));
		$("#backgroundColor").val($("#calendarTypeName").find('option:selected').attr("typeColor"));
		$("#title").val($("#calendarTypeName").val());
	}
</script>